<template>
  <div id="OnlineTheory">
    <div class="OnlineHeader">
      <div class="font_header">在线理论考核</div>
    </div>
    <div class="OnlineSearch">
      <a-select v-model="course" placeholder="选择课程" class="courseClass">
        <a-select-option
          v-for="item in courseList"
          :key="item.id"
          :value="item.id"
          >{{ item.name }}</a-select-option
        >
      </a-select>
      <a-button type="primary" style="margin-left: 10px" @click="beginClick"
        >开始考核</a-button
      >
    </div>
    <div class="OnlineContainer">
      <div class="leftContainer">
        <div class="leftTitle">00：{{ minutes }}：{{ seconds }}</div>
        <div class="leftBox">
          <div
            class="AnswerArea"
            v-for="(item, index) in leftList"
            :key="item.id"
          >
            <img src="@/assets/img/OnlineLine.png" />
            <div>
              <span>{{ item.keyIndex }}、</span><span>{{ item.topic }}</span>
            </div>
            <a-radio-group
              v-model="leftCheckList[index].selectValue"
              @change="(value) => updateSelectValue(item, value)"
            >
              <a-radio
                v-for="selectItem in item.optionList"
                :key="selectItem.id + '-' + selectItem.questionBankId"
                :style="radioStyle"
                :value="selectItem.id"
              >
                {{ selectItem.questionOption }}
              </a-radio>
            </a-radio-group>
          </div>
        </div>
      </div>
      <div class="rightContainer">
        <div class="rightHeader">
          <div>单选题:{{ singleChoiceList.length }}</div>
          <div>多选题:{{ multipleChoiceList.length }}</div>
          <div>判断题:{{ trueList.length }}</div>
        </div>
        <a-checkbox-group v-model="checkboxList" class="checkboxOnline">
          <a-row>
            <a-col
              style="height: 30px"
              :span="8"
              v-for="(item, index) in rightList"
              :key="index"
            >
              <a-checkbox :value="item.id">
                {{ item.label }}
              </a-checkbox>
            </a-col>
          </a-row>
        </a-checkbox-group>
        <div class="footerBox" @click="primaryClick">确认提交</div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      course: "",
      value: 1,
      radioStyle: {
        display: "block",
        height: "30px",
        lineHeight: "30px",
      },
      leftList: [],
      leftCheckList: [], //左边的答题所选值的集合
      singleChoiceList: [], //单选题的集合
      multipleChoiceList: [], //多选题的集合
      trueList: [], //判断题的集合
      courseList: [], //课程下拉列表
      rightList: [], //右边的答题卡的集合
      checkboxList: [], //右边的答题卡的选中的集合
      timer: null, //倒计时计时器
      hours: "00",
      minutes: "00",
      seconds: "00",
    };
  },
  created() {
    this.getCourseList(); //获取课程列表的下拉
  },
  methods: {
    updateSelectValue(item, value) {
      let keyIndex = item.keyIndex * 1 - 1;
      if (this.checkboxList.indexOf(keyIndex) == -1) {
        this.checkboxList.push(keyIndex); //右边的答题卡的选中的集合
      }
    },
    beginClick() {
      //开始考核
      clearInterval(this.timer);
      this.timer = null;
      this.$axios
        .get("/sys/question/getExamPaper", {
          // params: {
          //   courseId: this.course,
          // },
        })
        .then((res) => {
          console.log(res.response);
          
          this.rightList = []; //答题卡
          this.checkboxList = []; //答题卡选中的集合
          this.leftList = [];
          this.leftCheckList = []; //左边的答题所选值的集合
          // const futureDate = moment(
          //   res.data.suggestTime,
          //   "YYYY-MM-DD HH:mm:ss"
          // );
          // const currentDate = moment();
          // const duration = moment.duration(futureDate.diff(currentDate));
          // this.hours = Math.abs(Math.floor(duration.asHours()));
          // this.minutes = Math.abs(duration.minutes());
          // this.seconds = Math.abs(duration.seconds());

          // let countdownDuration = moment.duration({
          //   minutes: this.minutes,
          //   seconds: this.seconds,
          // });

          // this.timer = setInterval(() => {
          //   //倒计时计时器
          //   countdownDuration = moment.duration(countdownDuration - 1000);
          //   this.minutes = String(countdownDuration.minutes()).padStart(2, "0");
          //   this.seconds = String(countdownDuration.seconds()).padStart(2, "0");

          //   if (countdownDuration.asMilliseconds() <= 0) {
          //     clearInterval(this.timer);
          //     console.log("Countdown complete!");
          //   }
          // }, 1000);

          res.response.forEach((item, index) => {
            item.keyIndex = index + 1;
            item.selectValue = 0; //选项选中的值
            item.type = 3;
            item.optionList=[
              {
                id:0,
                questionOption:item.optionA,
              },
              {
                id:1,
                questionOption:item.optionB,
              },
              {
                id:2,
                questionOption:item.optionC,
              },
              {
                id:3,
                questionOption:item.optionD,
              },
            ]
            this.leftCheckList.push({
              selectValue: null,
              keyIndex: index + 1,
            }); //左边的答题所选值的集合
            this.rightList.push({
              label: index + 1,
              id: index,
            });
          });
          this.leftList = res.response; //type字段1判断,2单选,3多选
          this.singleChoiceList = res.response.filter(
            (item) => item.type == 2
          ); //单选题的集合
          this.multipleChoiceList = res.response.filter(
            (item) => item.type == 3
          ); //多选题的集合
          this.trueList = res.response.filter((item) => item.type == 1); //判断题的集合
        });
    },
    async getCourseList() {
      //获取课程的下拉列表
      let { data } = await this.$axios.get("/sys/course/page", {
        limit: 9999,
        page: 1,
      });
      let arr = [];
      data.data.list.forEach((item) => {
        arr.push({
          id: item.id,
          name: item.name,
        });
      });
      this.courseList = arr;
    },
    async primaryClick() {
      let data=[]
      this.leftList.forEach((item,index)=>{
        let indexBox=this.leftCheckList[index].selectValue;//选中选项的索引位置
        console.log(indexBox);
        let answer="";
        if (indexBox==0) {
          answer="A";
        }else if (indexBox==1) {
          answer="B";
        }else if (indexBox==2) {
          answer="C";
        }else if (indexBox==3) {
          answer="D";
        }else  {
          answer=null;
        }
        data.push({
          questionId:item.id,
          answer,
        })
      });
      this.$axios.post("/sys/examPaperAnswer",data).then(res=>{
        this.$message.success("提交成功");
      })
    },
  },
};
</script>

<style lang="scss" scoped>
#OnlineTheory {
  height: 100vh;
  background: url("~@/assets/img/OnlineBg.png") no-repeat 100%;
  .OnlineHeader {
    text-align: center;
    height: 70px;
    line-height: 70px;
    font-size: 40px;
    font-weight: 600;
    font-family: "KaiTi", "楷体", serif;
    background: #112b43;
    .font_header {
      letter-spacing: 20px;
      background: linear-gradient(to bottom, #0c84ab, #ceecf4);
      -webkit-background-clip: text; /* 只在文字上显示背景 */
      -webkit-text-fill-color: transparent; /* 填充透明色，使背景渐变显示出来 */
    }
  }
  .OnlineSearch {
    margin-top: 20px;
    margin-left: 50px;
  }
  .OnlineContainer {
    width: 100%;
    display: flex;
    height: 820px;
    justify-content: space-around;
    .leftContainer {
      width: 1180px;
      height: 100%;
      position: relative;
      background: url("~@/assets/img/Theory.png") no-repeat 100%;
      .leftTitle {
        position: absolute;
        left: 46%;
        font-size: 20px;
        color: #02d9fd;
      }
      .leftBox {
        width: 100%;
        margin-top: 3%;
        height: 94%;
        overflow-y: auto;
        .AnswerArea {
          padding: 0 20px 0 20px;
          font-size: 20px;
          color: white;
          font-family: "KaiTi", "楷体", serif;
        }
      }
    }
    .rightContainer {
      width: 540px;
      margin-top: 10px;
      position: relative;
      background: url("~@/assets/img/Theory2.png") no-repeat 100%;
      .rightHeader {
        position: absolute;
        left: 8%;
        top: 5%;
        display: flex;
        div {
          cursor: pointer;
          width: 150px;
          height: 50px;
          text-align: center;
          line-height: 50px;
          background: #001725;
          color: #02d9fd;
          border: 1px solid #1c44a9;
          font-size: 16px;
          font-family: "KaiTi", "楷体", serif;
        }
        .rightActived {
          background: #254989;
        }
      }
      .checkboxOnline {
        width: 80%;
        height: 550px;
        overflow-y: auto;
        position: absolute;
        left: 10%;
        top: 18%;
      }
      .footerBox {
        width: 300px;
        height: 50px;
        line-height: 50px;
        padding-left: 30px;
        text-align: center;
        position: absolute;
        bottom: 20px;
        left: 20%;
        background: url("~@/assets/img/primary_1.png") no-repeat 100%;
        cursor: pointer;
        color: #02d9fd;
        font-size: 16px;
        font-family: "KaiTi", "楷体", serif;
      }
    }
  }
}
</style>
<style lang="scss">
#OnlineTheory {
  .courseClass {
    width: 200px;
    .ant-select-selection {
      background: #04296d;
    }
    i {
      color: white;
    }
    .ant-select-selection-selected-value {
      color: white;
      font-family: "KaiTi", "楷体", serif;
    }
  }
  .ant-radio-wrapper {
    color: white;
  }
  .ant-checkbox-wrapper {
    span {
      color: white;
    }
    .ant-checkbox-disabled .ant-checkbox-inner {
      // background-color: #1890ff;
      // border-color: #1890ff !important;
    }
  }
}
</style>
